<!--suppress ALL -->
<template>
  <div>
    <div class="separation">
      <h1 v-show="article.difficulty===0" class="font-title-easy">{{ article.title }}</h1>
      <h1 v-show="article.difficulty===1" class="font-title-medium">{{ article.title }}</h1>
      <h1 v-show="article.difficulty===2" class="font-title-hard">{{ article.title }}</h1>
    </div>
    <div class="separation">
      <h2 class="font-summary">一一{{ article.summary }}</h2>
    </div>
    <div class="separation">
      <h2 class="font-gmtModified">一最后修改时间: {{ article.gmtModified }}</h2>
    </div>
    <div class="separation" v-highlight>
      <p class="font-content" v-html="article.content">{{ article.content }}</p>
    </div>
  </div>
</template>

<script>
import articleApi from '@/api/article'

export default {
  data() {
    return {
      articleId: '',
      article: {
        title: '',
        summary: '',
        content: '',
        sort: 0,
        difficulty: 0
      }
    }
  },

  created: function () {
    if (this.$route.params && this.$route.params.id) {
      this.articleId = this.$route.params.id
      console.log("============路由id=============")
      console.log(this.$route.params.id)
      // 调用根据id查询方法
      this.getArticleInfoById()
    }
  },

  methods: {

    //根据id获取文章信息
    getArticleInfoById() {
      articleApi.getArticleInfoById(this.articleId)
        .then(response => {
          this.article = response.data.article
          console.log("===========获取文章===========")
          console.log(this.article)
        })
    }
  }
}

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.font-title-easy {
  font-family: "微软雅黑";
  text-align: center;
  color: #00AF9B;
}
.font-title-medium {
  font-family: "微软雅黑";
  text-align: center;
  color: #FFB800;
}
.font-title-hard {
  font-family: "微软雅黑";
  text-align: center;
  color: #FF2D55;
}
.font-summary {
  color: #76839b;
  font-size: small;
  margin-left: 750px;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 2em;
}
.font-gmtModified {
  color: #76839b;
  font-size: small;
  margin-left: 900px;
  margin-top: 20px;
  margin-bottom: 10px;
  line-height: 2em;
}
.font-content {
  font-size: large;
  margin-top: 50px;
  margin-left: 6%;
  margin-right: 6%;
}
.separation p {
  font-size: large;
  color: #0c72f0;
}
.separation pre {
  margin-left: 130px;
  margin-right: 130px;
}
.separation {
  border-bottom: 1px solid rgb(103, 197, 154);
}
</style>
<style scoped>
.tinymce-container {
  line-height: 26px;
}
</style>
